import * as React from 'react';
import {
  Text,
  View,
  Image,
  StyleSheet,
  Alert,
  ComponentProvider,
} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {
  createNativeStackNavigator,
  NativeStackNavigationProp,
} from '@react-navigation/native-stack';

import Home from '../views/Home/index';
import Login from '../views/Login/index';
import More from '../views/Home/More/index';
import Story from '../views/Story/index';
import Mike from '../views/Mike/index';
import New from '../views/New/index';
import Me from '../views/Me/index';

export type RootStackParamList = {
  Login: React.ComponentType;
  More: React.ComponentType;
  TabBar: React.ComponentType;
  // 可以根据需要添加其他屏幕的路由名称和参数类型
};

export type TabParamList = {
  Home: React.ComponentType;
  Story: React.ComponentType;
  Mike: React.ComponentType;
  New: React.ComponentType;
  ME: React.ComponentType;
  // 可以根据需要添加其他选项卡的路由名称和参数类型
};

export type RouterOptions = RootStackParamList & TabParamList;

const Tab = createBottomTabNavigator<TabParamList>();
const Stack = createNativeStackNavigator<RootStackParamList>();
export type A = typeof Tab;
const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
  stretch: {
    width: 30,
    height: 30,
    resizeMode: 'stretch',
  },
});

function TabBar() {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarActiveTintColor: '#000',
      }}>
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({focused}) => (
            <Image
              source={
                focused
                  ? require('../assets/image/nav/home-active.png')
                  : require('../assets/image/nav/home.png')
              }
              style={styles.stretch}
            />
          ),
        }}
      />
      <Tab.Screen
        name="Story"
        component={Story}
        options={{
          tabBarLabel: 'Story',
          tabBarIcon: ({focused}) => (
            <Image
              source={
                focused
                  ? require('../assets/image/nav/story-active.png')
                  : require('../assets/image/nav/story.png')
              }
              style={styles.stretch}
            />
          ),
        }}
      />
      <Tab.Screen
        name="Mike"
        component={Mike}
        options={{
          tabBarLabel: 'Mike',
          tabBarIcon: ({focused}) => (
            <Image
              source={
                focused
                  ? require('../assets/image/nav/mike-active.png')
                  : require('../assets/image/nav/mike.png')
              }
              style={styles.stretch}
            />
          ),
        }}
      />
      <Tab.Screen
        name="New"
        component={New}
        options={{
          tabBarLabel: 'New',
          tabBarIcon: ({focused}) => (
            <Image
              source={
                focused
                  ? require('../assets/image/nav/new-active.png')
                  : require('../assets/image/nav/new.png')
              }
              style={styles.stretch}
            />
          ),
        }}
      />
      <Tab.Screen
        name="ME"
        component={Me}
        options={{
          tabBarLabel: 'Me',
          tabBarIcon: ({focused}) => (
            <Image
              source={
                focused
                  ? require('../assets/image/nav/me-active.png')
                  : require('../assets/image/nav/me.png')
              }
              style={styles.stretch}
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

export default function Router() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Login"
        screenOptions={{
        }}>
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="More" component={More} />
        <Stack.Screen name="TabBar" component={TabBar} options={{
          headerShown: false, // 隐藏Stack的头部
        }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
